<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
				xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8"/>
  <title>评论列表</title>
  <link rel="stylesheet" href="/css/layui.css" media="all"/>
</head>
<body>
<div class="commentDiv">
  书名：
  <div class="layui-inline">
    <input class="layui-input" name="commentname" id="commentname" autocomplete="off"/>
  </div>
  作者：
  <div class="layui-inline">
    <input class="layui-input" name="commentauthor" id="commentauthor" autocomplete="off"/>
  </div>
 出版社：
  <div class="layui-inline">
    <input class="layui-input" name="commentpress" id="commentpress" autocomplete="off"/>
  </div>
 类别：
  <div class="layui-inline">
    <input class="layui-input" name="commenttype" id="commenttype" autocomplete="off"/>
  </div> 
  <button class="layui-btn" data-type="reload">搜索</button>
</div>


<table class="layui-hide" id="commentTable" lay-filter="tableFilter"></table>
 
<script src="/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#commentTable'
    ,height: 'full'                   
    ,url: '/admin/getComment' //数据接口
    ,request: {
    		  pageName: 'begin' //页码的参数名称，默认：page
    		  ,limitName: 'length' //每页数据量的参数名，默认：limit
    		  }
    ,where: {commentType: 'activity'}
    ,page: true //开启分页
    ,even: true
    ,cols: [[ //表头
      {checkbox: true, fixed: true}
      ,{field: 'nickName', title: '用户昵称', width:250}
      ,{field: 'commentMsg', title: '评论', width:150}
      ,{field: 'addTime', title: '发表时间', width:150}
      ,{field: 'sonComments', title: '子评论数', width:150}
      ,{field: 'likes', title: '点赞数', width:150}
      ,{fixed: 'right', title: '操作',width:150, align:'center', toolbar: '#handler'} //这里的toolbar值是模板元素的选择器
    ]]
    ,id: 'commentReload'
  });
    
    //条件查询
	var $ = layui.$, active = {
		reload : function() {
			var commentname = $('#commentname').val().trim();
			var commentauthor = $('#commentauthor').val().trim();
			var commentpress = $('#commentpress').val().trim();
			var commenttype = $('#commenttype').val().trim();
			var jsonString = "";
			/*<![CDATA[*/
			var i = 0;
			jsonString = "{";
			if(commentname!=null&&commentname!=""){
				i++;
				jsonString = jsonString + "name:'" + commentname + "'";
			}
			if(commentauthor!=null&&commentauthor!=""){
				if(i!=0){
					jsonString = jsonString + ","
				}
				i++;
				jsonString = jsonString + "author:'" + commentauthor  + "'";
			}
			if(commentpress!=null&&commentpress!=""){
				if(i!=0){
					jsonString = jsonString + ","
				}
				i++;
				jsonString = jsonString + "press:'" + commentpress  + "'";
			}
			if(commenttype!=null&&commenttype!=""){
				if(i!=0){
					jsonString = jsonString + ","
				}
				i++;
				jsonString = jsonString + "type:" + commenttype;
			}
			jsonString = jsonString + "}"
			/*]]>*/
			
			//执行重载
			table.reload('commentReload', {
				page : {
					curr : 1
				//重新从第 1 页开始
				},
				where : {
						jsonString : jsonString
				}
			});
		}
	};

	$('.commentDiv .layui-btn').on('click', function() {
		var type = $(this).data('type');
		active[type] ? active[type].call(this) : '';
	});
	
	
	//操作绑定
	table.on('tool(tableFilter)', function(obj){ //注：tool是固定的工具条事件名，tableFilter是table原始容器的属性 lay-filter="对应的值"
		  var data = obj.data; //获得当前行数据
		  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		  var tr = obj.tr; //获得当前行 tr 的DOM对象
		 
		  if(layEvent === 'detail'){ //查看
		    //do somehing
		    alert(1123);
		  } else if(layEvent === 'del'){ //删除
		    layer.confirm('真的删除行么', function(index){
		      //向服务端发送删除指令
		      $.ajax({
	            url: "/adminApi/comment/"+data.commentid,
	            type: "DELETE",
	            success: function (d) {
	              obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
	  		      layer.close(index);
	            },
	            error: function (d) {
	                alert("error:"+d);
	            }
        	  });
            	
		    });
		  } else if(layEvent === 'edit'){ //编辑
		    //do something
			    layer.open({
			        type: 2,
			        title: '编辑',
			        area : ['800px' , '520px'], 
			        scrollbar: false,//禁止浏览器滚动
		        }); 
		    //同步更新缓存对应的值
		    /* obj.update({
		      username: '123'
		      ,title: 'xxx'
		    }); */
		  }
		});
});
</script>



<div class="form-group" id="editUser">
    <div>
        <div>
            <input  type="text" class="form-control" id="commentid"  value="commentid" />
        </div>
    </div>
    <div>
        <label  class="col-xs-2 control-label">书名</label>
        <div class="col-xs-9" >
            <input  type="text" class="form-control" id="commentname" />
        </div>
    </div>
</div>

<div class="form-group">
    <div class="col-xs-offset-5 col-xs-1">
        <button class="btn btn-primary" id="save">保存</button>
    </div>
    <div class="col-xs-1">
        <button class="btn btn-default" id="restore">还原</button>
    </div>
</div>


</body>
<script type="text/html" id="handler">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  
  <!-- 这里同样支持 laytpl 语法，如： -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
  {{#  } }}
</script>
</html>